<template>
	<view class="goods_details">
		<view class="header_box w100">
			<!-- <image class="w100 h100"
				:src="storeInfo.bgImg == null ? 'https://sz.vvv5g.com/assets/img/bg.png' : storeInfo.bgImg.img_src"
				mode=""></image> -->
			<swiper class="swiper_box" :autoplay="autoplay" :interval="interval" :circular="circular">
				<swiper-item class="swiper_box">
					<view class="swiper_box">
						<image class="w100 h100" :src="storeInfo.thumb" mode=""></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="tabbar">
			<tab-bar :type="type"></tab-bar>
		</view>
		<view class="store_box w100">
			<view class="flex">
				<view class="left_name_detail">
					<view class="left_name f500 s32 family">
						{{storeInfo.shopname}}
					</view>
					<view class="left_fangke f500 s24 family">
						商品{{storeInfo.goods}} | 访客{{storeInfo.views}}
					</view>
				</view>
				<view @click="guanzhu" :style="storeInfo.follow?'background-color: #EB8787;':''" class="guanzhu_box f500 s20 family txtali">
					{{storeInfo.follow?'已关注':'未关注'}}
				</view>
				<view class="portrait">
					<image class="img w100 h100" :src="storeInfo.avatar_url" mode=""></image>
				</view>
			</view>
			<view class="wei_xinxi_phone_box flex">
				<view class="weizhi_box flex" @click="getOpenLoaction">
					<view class="weizhi_img">
						<image class="w100 h100" src="../../../static/store/dingwei.png" mode=""></image>
					</view>
					<view class="weizhi_txt s22 f500 family">
						<block v-if="storeInfo.latitude && storeInfo.longitude">距离{{storeInfo.distance}}</block> {{storeInfo.city}}
					</view>
				</view>
				<view class="xinxi_box" @click="goPinglun">
					<image class="w100 h100" src="../../../static/store/xinxi.png" mode=""></image>
				</view>
				<view class="phone_box" @click="opPhone">
					<image class="w100 h100" src="../../../static/store/phone.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="sky1" :style="isSky?'position: fixed;top: 0;width: 100%;background: #fff;z-index:9999;':''">
			<screen-list :shopId="shopId" :screen_list="screen_list" :disabled="true" :backStyle="true" :pages="true" :showOne="true"
				@setData="getData"></screen-list>
			<view class="screen_list_box w100">
				<view class="screen_list_box flex">
					<view class="list_box flex" v-for="(item,index) in screen_list" :key="index" @click="onActive(index)">
						<view :class="[listIndex == index ? 'active_txt' : '', 'txt s24 f500 family']">
							{{item.txt}}
						</view>
						<image class="img" :src="listIndex == index ?item.img1:item.img" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<view class="sky1" v-if="isSky" style="opacity: 0;">
			<screen-list :shopId="shopId" :screen_list="screen_list" :disabled="true" :backStyle="true" :pages="true" :showOne="true"
				@setData="getData"></screen-list>
			<view class="screen_list_box w100">
				<view class="screen_list_box flex">
					<view class="list_box flex" v-for="(item,index) in screen_list" :key="index" @click="onActive(index)">
						<view :class="[listIndex == index ? 'active_txt' : '', 'txt s24 f500 family']">
							{{item.txt}}
						</view>
						<image class="img" :src="item.img" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		<zero-waterfall :list="type == 2 ? goodsTwoList : goodsList"></zero-waterfall>
		<share-box ref="child" :show="show"></share-box>
	</view>
</template>

<script>
	import screenList from '../../../components/screen.vue';
	import shareBox from '../../../components/share.vue';
	export default {
		components: {
			screenList,
			shareBox
		},
		data() {
			return {
				type: '1',
				show: false,
				storeInfo: {},
				screen_list: [{
						img: '/static/shopping/jiage.png',
						img1: '/static/Group 3814.png',
						txt: '价格排序'
					},{
						img: '/static/shopping/zuixin.png',
						img1: '/static/Group 3817.png',
						txt: '最新上架'
					},{
						img: '/static/shopping/pingfen.png',
						img1: '/static/Group 3815.png',
						txt: '人气爆款'
					},
					{
						img: '/static/shopping/renqi.png',
						img1: '/static/Group 3816.png',
						txt: '评分最高'
					}
				],
				goodsList: [],
				autoplay: true,
				interval: 5000,
				circular: true,
				page: 1,
				totalNum: '',
				goodsTwoList: [],
				listIndex: 0,
				shopId:0,
				isSky:false,
				skyHeight:0,
			}
		},
		onLoad() {
			this.shopId = this.$store.state.shop.id;
			this.getShopData(3);
			this.getStoreGoods()
			uni.setNavigationBarTitle({
				title: this.$store.state.shop.shopname
			})
		},
		onPageScroll(e) {
			if(e.scrollTop>this.skyHeight){
				this.isSky = true;
			}else {
				this.isSky = false;
			}
		},
		mounted() {
			const query = uni.createSelectorQuery();
			query.select(".sky1").boundingClientRect(data => {
				this.skyHeight = data.top;
			}).exec()
		},
		onReachBottom() {
			if (this.page >= this.totalNum) {
				let goodsListLength = this.goodsList.length
				this.goodsList = this.goodsList[goodsListLength]
			} else {
				this.page++
				this.getStoreGoods()
			}
		},
		methods: {
			// 调取导航
			getOpenLoaction() {
				if(!this.storeInfo.latitude && !this.storeInfo.longitude){
					uni.showToast({
						title: "当前店铺未开启定位！",
						icon: "none"
					})
					return false
				}
				
				uni.openLocation({
					latitude: Number(this.storeInfo.latitude),
					longitude: Number(this.storeInfo.longitude),
					success: function() {
						return false
					},
					fail(error) {
						return false
					}
				});
			},
			// 搜索组件返回事件
			getData(val,type) {
				this.type = type
				if(this.type == 2) {
					this.goodsTwoList = val
				} else {
					this.goodsList = val
				}
			},
			guanzhu(){
				let pages = getCurrentPages();
				let prePage = pages[pages.length - 2];
				let follow = this.storeInfo.follow?1:0;
				prePage.$vm.guanZhu(this.$store.state.shop.id,follow);
			},
			// 获取门店信息
			getShopData(follow) {
				this.$request({
					url: 'shop/getShopInfo',
					data: {
						id: this.$store.state.shop.id,
						lng: uni.getStorageSync('location').longitude,
						lat: uni.getStorageSync('location').latitude,
					}
				}).then(res => {
					if (res.statusCode == 200) {
						this.storeInfo = res.data.data
						if(follow!=3){
							if (follow == 1) {
								uni.showToast({
									title: '取消关注',
									icon: 'none',
									duration: 2000,
								})
							} else {
								uni.showToast({
									title: '关注成功',
									icon: 'none',
									duration: 2000,
								})
							}
						}
					}
				})
			},
			// 获取普通店铺的商品列表
			getStoreGoods() {
				let that = this
				uni.showLoading({
					title: "加载中..."
				})
				that.$request({
					url: 'product/lists',
					method: 'POST',
					data: {
						page: that.page,
						shop_id: this.$store.state.shop.id,
						index:'index'
					}
				}).then(res => {
					that.totalNum = res.data.data.last_page
					that.goodsList = that.page == 1 ? (res.data.data.data ? res.data.data.data : []) : that.goodsList
						.concat(res.data.data.data);
					uni.hideLoading()
					console.log(that.type)
					console.log(that.goodsList)
					console.log(that.goodsTwoList)
				})
			},
			onActive(ind) {
				this.listIndex = ind
			},
			// 调取手机电话
			opPhone() {
				if(!this.storeInfo.mobile) return false
				uni.makePhoneCall({
					phoneNumber: this.storeInfo.mobile
				})
			},
			// 去评论
			goPinglun(id){
				uni.navigateTo({
					url: '/pages/filePages/evaluate/evaluate?shopid=' + this.storeInfo.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.goods_details {
		overflow: hidden;
		padding-bottom: 130upx;

		.tabbar {
			position: absolute;
		}

		.header_box {
			height: 262upx;
			background: #999999;
			.swiper_box {
				width: 750upx;
				height: 262upx;
			}
		}

		.fenxiang_btn {
			width: 68upx;
			height: 68upx;
			position: absolute;
			top: 32upx;
			right: 32upx;
		}

		.store_box {
			height: 210upx;
			background: #FFFFFF;

			.left_name_detail {
				margin-left: 32upx;
				margin-top: 20upx;

				.left_name {
					color: #000000;
				}

				.left_fangke {
					color: #999999;
					margin-top: 12upx;
				}
			}

			.guanzhu_box {
				width: 80upx;
				height: 36upx;
				background: #E4E4E4;
				border-radius: 8upx 8upx 8upx 8upx;
				color: #FFFFFF;
				line-height: 36upx;
				margin-top: 24upx;
				margin-left: 14upx;
			}

			.portrait {
				width: 160upx;
				height: 160upx;
				background-color: #C0C4CC;
				border-radius: 80upx;
				margin-left: 48upx;
				margin-top: -70upx;
				position: absolute;
				right: 32upx;

				.img {
					border-radius: 80upx;
				}
			}

			.wei_xinxi_phone_box {
				margin-top: 34upx;
				margin-left: 28upx;

				.weizhi_box {
					margin-top: 6upx;

					.weizhi_img {
						width: 26upx;
						height: 26upx;
					}

					.weizhi_txt {
						color: #E29D48;
						margin-top: 4upx;
					}
				}

				.xinxi_box {
					width: 48upx;
					height: 48upx;
					margin-left: 134upx;
				}

				.phone_box {
					width: 48upx;
					height: 48upx;
					margin-left: 58upx;
				}
			}
		}

		.screen_list_box {
			padding-left: 22upx;
			padding-bottom: 10upx;
			background-color: #ffffff;
			box-sizing: border-box;
			.list_box {
				margin-left: 53upx;
		
				.txt {
					color: #999999;
				}
		
				.active_txt {
					color: #333333;
				}
		
				.img {
					width: 32upx;
					height: 32upx;
					display: inline-block;
					margin-left: 4upx;
				}
			}
		
			.list_box:nth-child(1) {
				margin-left: 0;
			}
		}
	}
</style>
<style>
	page {
		background-color: #F4F5F9;
	}
</style>
